import React, { useContext } from 'react'

import GlobalContext from './Context'

export default function FilmItem(props) {
  let { name, poster, grade } = props
  let { dispatch } = useContext(GlobalContext)
  return (
    <div className='filmItem'>
      <div className='poster'>
        <img
          onClick={() =>
            dispatch({
              type: 'change-film',
              payload: props,
            })
          }
          src={poster}
          alt={name}
        />
      </div>
      <div className='content'>
        <h4> {name}</h4>
        <div>观众评分： {grade}</div>
      </div>
    </div>
  )
}
